
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 560px;
            height: 312px;
            background-color: rgb(249, 247, 248);
            border: 1px solid rgb(222, 222, 222);
            margin-left: 10px;
            margin-top: 10px;
        }

        .left {
            width: 456px;
            float: left;
        }

        .left img {
            width: 440px;
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right {
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right img {
            width: 95px;
            height: 62px;
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"><img src="1.jpg" /></div>
        <div class="right">
            <img src="1.jpg" />
            <img src="2.jpg" />
            <img src="3.jpg" />
            <img src="4.jpg" />
        </div>
    </div>
</body>
<script>
    // 1、自动切换 图片
    // 2、鼠标移入右侧的图片 左边切换到对应的图片  鼠标移出  以当前的图片 自动继续切换图片
    // 3、当前显示的小图片 透明度为1  其他没有显示的保证透明度为0.5

    var smallDom = document.querySelectorAll('.right>img');
    var bigDom   = document.querySelector('.left>img');

    smallDom.forEach(function(e){
        e.style.opacity = 0.5;
        e.addEventListener('mouseover',function(){
            this.style.opacity = 1;
            bigDom.src = this.src;
        })

        e.addEventListener('mouseout',function(){
            this.style.opacity = 0.5;
        })
    })
</script>